<template>
    <div :class="{active : isActive}">
        <svg 
            :width="width"
            :height="height"
            :viewBox="viewBox"
            :fill="fillColor"
            xmlns="http://www.w3.org/2000/svg">
            <path d="M7.51078 2.17094C7.8898 0.609686 10.1102 0.609686 10.4892 2.17094C10.7341 3.17949 11.8896 3.65811 12.7758 3.11809C14.1478 2.28212 15.7179 3.85218 14.8819 5.22416C14.3419 6.11045 14.8205 7.26593 15.8291 7.51078C17.3903 7.8898 17.3903 10.1102 15.8291 10.4892C14.8205 10.7341 14.3419 11.8896 14.8819 12.7758C15.7179 14.1478 14.1478 15.7179 12.7758 14.8819C11.8896 14.3419 10.7341 14.8205 10.4892 15.8291C10.1102 17.3903 7.8898 17.3903 7.51078 15.8291C7.26594 14.8205 6.11045 14.3419 5.22417 14.8819C3.85218 15.7179 2.28212 14.1478 3.11809 12.7758C3.65811 11.8896 3.17949 10.7341 2.17094 10.4892C0.609686 10.1102 0.609686 7.8898 2.17094 7.51078C3.17949 7.26593 3.65811 6.11045 3.11809 5.22416C2.28212 3.85218 3.85218 2.28212 5.22416 3.11809C6.11045 3.65811 7.26594 3.17949 7.51078 2.17094Z" stroke="#0F62FE" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M11.6667 9C11.6667 10.4728 10.4728 11.6667 9 11.6667C7.52724 11.6667 6.33333 10.4728 6.33333 9C6.33333 7.52724 7.52724 6.33333 9 6.33333C10.4728 6.33333 11.6667 7.52724 11.6667 9Z" stroke="#0F62FE" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
    </div>
</template>

<script>
    export default {
      props: {
        width: {
          type: Number,
          default: '18'
        },
        height: {
          type: Number,
          default: '18'
        },
        viewBox: {
          type: Number,
          default: '0 0 18 18'
        },
        fillColor: {
          type: String,
          default: 'white'
    
        },
        isActive: {
          type: Boolean
        }
      }
    }
</script>
